<script setup>
import '@/assets/css/laoutStyle.css'
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom,
    Link,
    Share
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { DataLine } from '@element-plus/icons-vue'
import {userInfoService} from '@/api/user.js'
import useUserInfoStore from '@/stores/userinfo.js'
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore();
const getUserInfo = async()=>{
    let result = await userInfoService();
    userInfoStore.setInfo(result.data);
}
getUserInfo();

import { useRouter } from 'vue-router';
import { ElMessage,ElMessageBox } from 'element-plus';
const router = useRouter();
const handleCommand = (command)=>{
    if(command === 'logout'){
        ElMessageBox.confirm(
    '你确定要退出吗?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
        tokenStore.removeToken();
        userInfoStore.removeInfo();

        router.push('/login')

      ElMessage({
        type: 'success',
        message: '退出成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
    }else{
        router.push('/user/'+command);
    }
}
import '@/assets/css/sidebar-animation.css'
import '@/utils/sidebar-animation.js'
import '@/utils/header-animation.js'
import '@/assets/css/header-animation.css'
import '@/assets/css/footer.css'
import '@/assets/css/sidebar-video.css'
import '@/utils/sidebar-video.js'
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <strong>新闻后台管理系统</strong>
            <el-menu  active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
                <el-menu-item index="/statistics" class="menu-item">
                    <el-icon>
                        <DataLine />
                    </el-icon>
                    <span>数据汇总</span>
                </el-menu-item>
                <el-menu-item index="/article/category" class="menu-item">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>文章分类</span>
                </el-menu-item>
                <el-menu-item index="/article/manage" class="menu-item">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>

                <el-menu-item index="/client/manage" class="menu-item">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>客户管理</span>
                </el-menu-item>

                <el-menu-item index="/adposition/manage" class="menu-item">
                    <el-icon >
                        <Share/>
                    </el-icon>
                    <span>广告位管理</span>
                </el-menu-item>

                <el-sub-menu >
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/user/userInfo" class="submenu-title">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/updateAvatar" class="submenu-title">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/updatePwd" class="submenu-title">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div><strong>Hello!
                     <span style="display:inline-block; width: 10px;"></span>
                    {{ userInfoStore.info.nickname }}</strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="userInfo" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="updateAvatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="updatePwd" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
            <el-footer class="el-footer">
    <strong>新闻后台管理系统</strong>
    <span>©2025 Created by IT</span>
</el-footer>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #1e3a8a; // 深蓝色
    color: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);

    &__logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 100px auto;
      margin: 10px auto;
    }

    .el-menu {
      background-color: transparent;
      border-right: none;
    }

    .el-menu-item.is-active {
      background-color: #3b82f6 !important; // 激活项高亮蓝
      color: #fff !important;
    }
  }

  .el-header {
    background: linear-gradient(to right, #3b82f6, #60a5fa); // 渐变蓝头部
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .el-dropdown__box {
      display: flex;
      align-items: center;
      cursor: pointer;

      .el-avatar {
        border: 2px solid #fff;
      }

      .el-icon {
        color: #fff;
        margin-left: 10px;
      }
    }
  }

  .el-main {
    background-color: #f0f4ff; // 浅蓝灰背景
    padding: 20px;
  }

  .el-footer {
    background-color: #1e40af; // 底部深蓝
    color: #dbeafe;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
  }
}
</style>
